<!--/**
* 分享部分首页*
*
* @author LWG
* @date 2022/7/19 15:08
* @since 1.0.0
*/-->
<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value"  placeholder="请输入搜索关键词" shape="round" show-action @search="search">
      <template #action>
        <router-link to="/homeview/share/sharepage/postShare">
          <div class="right_icon">
            <van-icon name="add-o" size="26" />
          </div>
        </router-link>
      </template>
    </van-search>

    <!-- 标签页，用于区分区域 -->
    <van-tabs @click="onclick" v-model="activeName">
      <van-tab v-for="na in navigate" :title="na.content" :name="na.id">
        <!-- 占位符 -->
        <router-view />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  data() {
    return {
      value: "",
      moduleId: 1001,
      List: [{}],
      navigate: [
          {id: 1001,content: "高数区"},
          {id: 1002,content: "物理区"},
          {id: 1003,content: "情感区"},
          {id: 1004,content: "专业区"},
          {id: 1005,content: "游戏区"},
          {id: 1006,content: "考研区"},
          {id: 1007,content: "考证区"},
          {id: 1008,content: "兼职区"},
      ]
    };
  },
  computed: {
    ...mapState(['activeName'])
  },
  created() {
    console.log(this.activeName)
    this.axios.get('http://localhost:10004/article/'+this.activeName+'/list').then(response =>{
      if (response.data.state == 200){
        // this.shareArray = response.data.data
        console.log(this.shareArray)
        this.$store.commit("updateShareArray",response.data.data)
      }else {
      }
    })
  },
  methods: {
    onclick(name,title) {
      console.log(title,name)
      this.moduleId = name
      this.activeName = name
      console.log(this.moduleId)
      this.axios.get('http://localhost:10004/article/'+this.moduleId+'/list').then(response =>{
        if (response.data.state == 200){
          this.shareArray = response.data.data
          console.log(this.shareArray)
          this.$store.commit("updateActiveName",name)
          this.$store.commit("updateShareArray",response.data.data)
        }else {

        }
      })
    },
    //搜索
    search(){
      const url = "http://localhost:10007/search1/share"
      const dat ={
        keyword: this.value,
        page: 1,
        pageSize: 100
      }
      this.axios.get(url+"?keyword="+this.value+"&page="+1+"&pageSize="+100).then(response =>{
        if(response.data.state==200){
          console.log("搜索成功",response.data.data)
          this.List = response.data.data
          //修改属性名
          for(let i=0;i<response.data.data.length;i++){
            this.List[i].content = response.data.data[i].articleContent
            this.List[i].title = response.data.data[i].articleTitle
            this.List[i].nickName = response.data.data[i].nickname
          }
          this.$store.commit("updateShareArray",response.data.data)
        console.log("修改属性",this.List)
          /*this.$store.commit("updateShareArray",response.data.data)*/
        }else {
          console.log("搜索失败",response.data.data)
        }
      })
    }
  }
};
</script>

<style scoped>
/* 改变搜索框内部的背景颜色 */
.van-search__content {
  background-color: #f0f0f0;
}
.right_icon{
display: flex;
}
</style>